<template>
  <div class="classify">
    <div class="g-main">
      <div class="classify-title">
        请选择<span style="color: blue">{{ searchVocDetails }}</span
        >的参考信息
      </div>
      <div>
        <div style="margin-top: 40px; margin-left: 0px">
          <div class="title">1.化学反应：</div>
          <div class="choose">
            <el-radio-group v-model="radio" size="big">
              <el-radio label="催化反应" class="radioDiv"></el-radio>
              <el-radio label="大气化学反应" class="radioDiv"></el-radio>
            </el-radio-group>
          </div>
        </div>
        <div style="margin-top: 40px; margin-left: 0px">
          <div class="title">2.生物化学降解：</div>
          <div class="choose">
            <el-radio-group v-model="radio" size="big">
              <el-radio label="降解菌" class="radioDiv"></el-radio>
              <el-radio label="降解菌群" class="radioDiv"></el-radio>
              <!-- <el-radio label="应用工业"></el-radio> -->
            </el-radio-group>
          </div>
        </div>
        <div style="margin-top: 40px; margin-left: 0px">
          <div class="title">3.健康风险：</div>
          <div class="choose">
            <el-radio-group v-model="radio" size="big">
              <el-radio label="致癌与非致癌风险" class="radioDiv"></el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="button-div">
      <div class="db-group">
        <el-button-group>
          <el-button type="info" icon="el-icon-arrow-left" @click="goback"
            >上一步</el-button
          >
          <el-button type="info" @click="goforward"
            >下一步<i class="el-icon-arrow-right el-icon--right"></i
          ></el-button>
        </el-button-group>
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  name: "ClassifyView",
  data() {
    return {
      radio: "",
      voc: "Benzene (C6H6)",
      form: {
        type: "",
      },
      vocId: '',
      searchVocDetails: '',
    };
  },
  mounted() {
    this.searchVocDetails = this.$route.query.searchVocDetails;
    this.vocId = this.$route.query.vocId;

  },
  watch: {
    radio: {
      handler(a, b) {
        console.log("aini", a, b);
        this.routerDetails();
      },
    },
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    goforward() {
      if (this.radio !== "") {
        this.routerDetails();
      }
    },
    routerDetails() {
      console.log(this.radio);
      switch (this.radio) {
        case "催化反应":
          this.$router.push({
            path: "/choose",
            query: {
              searchVocDetails: this.searchVocDetails,
              radio: this.radio,
              vocId: this.vocId,
            },
          });
          break;
        case "大气化学反应":
          this.$router.push({
            path: "/choose",
            query: {
              searchVocDetails: this.searchVocDetails,
              radio: this.radio,
              vocId: this.vocId,
            },
          });
          break;
        case "降解菌":
          this.$router.push({
            path: "/bacteria",
            query: {
              searchVocDetails: this.searchVocDetails,
              radio: this.radio,
              vocId: this.vocId,
            },
          });
          break;
        case "降解菌群":
          this.$router.push({
            path: "/bacterias",
            query: {
              searchVocDetails: this.searchVocDetails,
              radio: this.radio,
              vocId: this.vocId,
            },
          });
          break;
        case "致癌风险":
          this.$router.push({
            path: "/cancer",
            query: {
              voc: this.voc,
              radio: this.radio,
            },
          });
          break;
        case "非致癌风险":
          this.$router.push({
            path: "/nocancer",
            query: {
              voc: this.voc,
              radio: this.radio,
            },
          });
          break;
        case "致癌与非致癌风险":
          this.$router.push({
            path: "/health",
            query: {
              vocId: this.vocId,
              radio: this.radio,
              searchVocDetails: this.searchVocDetails
            },
          });
          break;
        default:
          return;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.classify {
  // margin: 0 auto;
  margin-left: 0px;
  margin-top: 20px;
  // width: 600px;
  // height: 100px;
  .classify-title {
    text-align: left;
    font-size: large;
    font-weight: 900;
    margin-left: 10px;
  }
  .title {
    text-align: left;
    font-weight: 500;
    margin-left: 10px;
    margin-top: 20px;
  }
  .choose {
    text-align: left;
    .radioDiv {
      width: auto;
      display: table;
      margin-left: 20px;
      margin-top: 30px;
      font-size: x-large;
      font-weight: 600;
    }
  }
  .button-div {
    margin-top: 50px;
    text-align: left;
  }
  .db-group {
    margin-left: 50px;
  }
}
</style>
